/**
 * Project  : monkey
 * Author   : Wu Tian Qiang
 * Date     : 2016/10/14 18:39:22
 */
Ext.define('Monkey.view.icon.Icon', {
    extend: 'Ext.panel.Panel',

    id: 'mk-icon',
    cls: 'mk-icon',
    controller: 'ctrl-icon',
    viewModel: 'vm-icon',
    layout: 'fit',
    tbar: [{
        icon: 'resources/icons/16/pictures.png',
        text: '小图标16×16',
        xtype: 'button',
        handler: 'findSIZE16Icons'
    }, {
        icon: 'resources/icons/16/picture.png',
        text: '小图标64×64',
        xtype: 'button',
        handler: 'findSIZE64Icons'
    }, '-', {
        icon: 'resources/icons/16/picture_save.png',
        text: '同步更新',
        xtype: 'button',
        handler: 'synIcons'
    }, '-', {
        xtype: 'textfield',
        readOnly: true,
        width: 350,
        reference: 'copyIconName',
        labelAlign: 'right',
        emptyText: '当前选中图标...',
        fieldLabel: '复制图标路径'
    } /*, '-', {
     icon: 'resources/icons/16/vector.png',
     text: '矢量图标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
     xtype: 'button'
     }*/, '->', {
        xtype: 'textfield',
        reference: 'iconName',
        labelAlign: 'right',
        emptyText: '输入要查询图标名称...',
        fieldLabel: '图标名称'
    }, {
        icon: 'resources/icons/16/page_find.png',
        text: '查询',
        handler: 'findIconByName'
    }, {
        iconCls: 'refresh',
        text: '重置',
        handler: 'reloadIcon'
    }],
    initComponent: function () {
        var store = Ext.create('Monkey.store.icon.Icon');
        store.getProxy().setExtraParam('search.iconType_eq', 'SIZE16');
        store.loadPage(1);
        this.bbar = {
            xtype: 'pagingtoolbar',
            pageSize: 100,
            store: store,
            displayInfo: true,
            plugins: new Ext.ux.ProgressBarPager()
        };
        this.items = [{
            xtype: 'dataview',
            scrollable: true,
            tpl: [
                '<tpl for=".">',
                '<div class="icon" style="height: {height}px;">',
                '<img src="resources/icons/{icon}"><br>',
                '<span>{name}</span>',
                '</div>',
                '</tpl>'
            ],
            itemSelector: 'div.icon',
            store: store,
            listeners: {
                'itemclick': 'itemclick'
            }
        }];
        this.callParent();
    }
});